@import "../../../less/variables";
@import "../../../less/animation.less";

.cockpit-container-wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  .container{
    position: relative;
  }
  .bg{
    position: absolute;
    z-index: 999999;
    pointer-events: none;       // 让事件穿透当前遮罩层   其实背景是在上方
    background: url("../../../assets/cockpit_bg.png");
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    text-align: center;
    .title{
      font-size: 31px;
      color: #fff;
      font-family: "黑体";
      font-weight: bold;
      margin-top: 2vh;
      display: inline-block;
      pointer-events: auto;
      cursor: pointer;
      user-select:none;
    }
    .timer{
      position: absolute;
      top: 3vh;
      left: 2vw;
      z-index: 99;
    }
    .weather{
      position: absolute;
      top: 3vh;
      right: 2vw;
      z-index: 99;
    }
    .menu-enter{
      position: absolute;
      z-index: 99;
      top: 23px;
      right: 30px;
      pointer-events: auto;
      cursor: pointer;
      padding: 5px;
      font-size: 20px;
    }
    .back {
      top: 30px;
      font-size: 14px;
    }
    .drop-list{
      position: absolute;
      top: 85px;
      left: 35%;
      background:rgba(0, 0, 0, .6);
      box-shadow:0px 0px 16px inset rgba(0,168,255,1);
      border-radius:4px;
      color: #fff;
      font-size: 14px;
      list-style: none;
      padding: 2px 0;
      pointer-events: auto;
      li{
        padding: 5px 25px;
        position: relative;
        cursor: pointer;
        transition: all .3s;
        pointer-events: auto;
        &:hover{
          color: #00A8FF;
        }
        &:last-child{
          .line{
            background: none !important;
          }
        }
        .line{
          position: absolute;
          bottom: 0;
          left: 0;
          height:1px;
          width: 80%;
          left: 10%;
          background:linear-gradient(90deg,rgba(46,60,76,1),rgba(194,186,179,1),rgba(46,60,76,1));
        }
      }
    }
    .drop-menu-list{
      .drop-list;
      position: absolute;
      top: 68px;
      left: auto;
      right: 10px;
      z-index: 99999;
      display: flex;
      box-shadow:0px 0px 16px inset rgba(0,168,255,1);
      li{
        padding: 6px 15px;
        flex: 1;
        .line{
          position: absolute;
          top: 20%;
          right: 0;
          height:60%;
          width: 1px;
          left: auto;
          bottom: auto;
          background:linear-gradient(180deg,rgba(46,60,76,1),rgba(194,186,179,1),rgba(46,60,76,1));
        }
      }
    }
  }
  .left-round{
    position: absolute;
    height: 27px;
    width: 30px;
    z-index: 2;
    left: 29px;
    top: 8%; // 87px;
    background: url("../../../assets/cockpit_round.png");
    -webkit-animation: rotate 3s infinite linear ;
  }
  .right-round{
    position: absolute;
    height: 27px;
    width: 30px;
    right: 29px;
    top: 8%; // 87px;
    z-index: 2;
    background: url("../../../assets/cockpit_round.png");
    -webkit-animation: rotate 3s infinite linear ;
  }
  :global {
    .ant-menu-item, .ant-menu-submenu-title{
      color: #fff !important;
    }
    .ant-menu {
      position: absolute;
      top: 40px;
      right: 17%;
      width: 120px;
      z-index: 666;
      color: #fff;
      box-shadow: 0px 0px 16px 0px rgba(0,168,255,1);
      border-radius: 4px;
      background: none;
      text-align: center;
    }
  }
}
:global {
  .ant-menu-submenu {
    .ant-menu {
      background: #051e2e;
      box-shadow: 0px 0px 16px 0px rgba(0,168,255,1);
    }
    li {
      color: #fff;
      background: #051e2e;
    }
  }
  .ant-menu-dark .ant-menu-item:hover{
    color: #03d9f9;
  }
  .ant-menu-vertical.ant-menu-sub{
    min-width: auto;
    text-align: center;
  }
}
